<template>
  <div class="order-box">
    <!--公用头部，单击返回按钮，直接前往个人中心-->
    <custom-header :title="'我的订单'" :back="'/user'"></custom-header>
    <!--6个Tab选项，横向滚动，切换时触发 onChangeTab 方法，更新数据-->
    <van-tabs @click="onChangeTab" :color="'#1baeae'" :title-active-color="'#1baeae'" class="order-tab" v-model="status">
      <van-tab title="全部" name=""></van-tab>
      <van-tab title="待付款" name="0"></van-tab>
      <van-tab title="待确认" name="1"></van-tab>
      <van-tab title="待发货" name="2"></van-tab>
      <van-tab title="已发货" name="3"></van-tab>
      <van-tab title="交易完成" name="4"></van-tab>
    </van-tabs>
    <!--列表部分-->
    <div class="content">
      <!--下拉刷新-->
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="order-list-refresh">
        <!--上滑加载更多-->
        <!--
          v-model:loading:加载状态
          finished:判断是否结束，没有下一页
          finished-text: 结束文字
          load:加载事件
          offset:滚动条距离底部的距离，可触发加载事件
        -->
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          @offset="10"
        >
          <div v-for="(item, index) in list" :key="index" class="order-item-box" @click="goTo(item.orderNo)">
            <div class="order-item-header">
                <span>订单时间： {{ item.createTime }}</span>
                <span>{{ item.orderStatusString }}</span>
            </div>
            <!--vant 组件库的card组件用于创建类似卡片形式的布局，比如订单列表项-->
            <van-card 
              v-for="one in item.newBeeMallOrderItemVOS"
              :key="one.orderId"
              :num="one.goodsCount"
              :price="one.sellingPrice"
              desc="全场包邮"
              :title="one.goodsName"
              :thumb="$filters.prefix(one.goodsCoverImg)"
            />
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>
<script>
import { reactive, toRefs } from 'vue'
import CustomHeader from 'components/CustomHeader.vue' //引入公用头部
import { getOrderList } from 'service/order' //订单相关接口方法
import { useRouter } from 'vue-router' //引入路由方法

export default {
  name: 'Order',
  components: {
    CustomHeader //注册组件
  },
  setup(){
    //生成路由实例
    const router = useRouter()
    const state = reactive({
      status: '', //状态变量
      loading: false,
      finished: false,
      refreshing: false,
      list: [],
      page: 1,
      totalPage: 0
    })
    //初始化数据
    const loadData = async () => {
      const { data, data: {list}} = await getOrderList({pageNumber:state.page, status: state.status})
      /**
       * data数据结构
       * [
       *  {
       *    createTime:创建时间
       *    orderId: 订单id
       *    orderNo: 订单号
       *    orderStatus: 状态值
       *    orderStatusString: 状态名
       *    payType: 支付类型，1 为支付宝，2为微信
       *    totalPrice: 订单总额
       *    newBeeMallOrderItemVOS:[{
       *      goodsCount: 商品数量
       *      goodsCoverImg: 商品图片
       *      goodsId: 商品id
       *      goodsName: 商品名称
       *    }]
       *  }
       * ]
       */
      //使用concat方式，加载新的一页数据，拼接到旧数据后面
      state.list = state.list.concat(list)
      //设置总页数，用于控制是否加载到最后一页
      state.totalPage = data.totalPage
      //加载状态
      state.loading = false;
      //当前页数大于或等于总页数时，标识已经加载完毕，没有更多页了
      if(state.page >= data.totalPage){
        state.finished = true
      }
    }
    //前往订单详情页面，带上id用于查询
    const goTo = (id) => {
      router.push({path:'/order-detail', query: { id }})
    }
    //初始化加载数据
    const onLoad = () => {
      if(!state.refreshing && state.page < state.totalPage) {
        //非下拉刷新且当前页数小于总页数时，page加1
        state.page = state.page + 1
      }
      //下拉刷新时，清空列表
      if(state.refreshing){
        state.list = [];
        state.refreshing = false;
      }
      loadData()
    }
    //下拉刷新
    const onRefresh = () => {
      state.refreshing = true
      state.finished = false 
      state.loading = true 
      state.page = 1
      onLoad()
    }

    const onChangeTab = (name) => {
      //这里Tab最好使用单击事件@click，如果使用@change事件，则进入页面会默认执行一次代码，导致数据重复
      state.status = name
      onRefresh()
    }

    return {
      ...toRefs(state),
      onChangeTab,
      goTo,
      onLoad,
      onRefresh
    }
  }
}
</script>
<style lang="less" scoped>
@import '../theme/custom';
.order-box{
  .order-header{
    .fj();
    .wh(100%, 44px);
    line-height: 44px;
    padding: 0 10px;
    .boxSizing();
    color: #252525;
    background: #fff;
    border-bottom: 1px solid #dcdcdc;
    .order-name{
      font-size: 14px;
    }
  }
  .order-tab{
    position: fixed;
    left: 0;
    z-index: 1000;
    width: 100%;
    border-bottom: 1px solid #e9e9e9;
  }
  .skeleton{
    margin-top: 60px;
  }
  .content{
    height: calc(~"(100vh - 70px)");
    overflow: hidden;
    overfow-y: scroll;
    margin-top: 34px;
  }
  .order-list-refresh{
    .van-card__content{
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .van-pull-refresh__head{
      background: #f9f9f9;
    }
    .order-item-box{
      margin: 20px 10px;
      background-color: #fff;
      .order-item-header{
        padding: 10px 20px 0 20px;
        display: flex;
        justify-content: space-between;
      }
      .van-card{
        background-color: #fff;
        margin-top: 0;
      }
    }
  }
}
</style>